<!--  -->
<template>
  <editor
  v-if="init !== null"
  api-key="46trwrbaw6awfma4xyowcwtz7tobwwmez0kiggxecnrceaij"
  :init="init"
  v-model="vvv"
  @onChange="onChangeEvent">
  </editor>
</template>

<script>
import Editor from '@tinymce/tinymce-vue'
import { SingleImageUploadApi } from '@/api/attachment'
export default {
  name: 'WxMaterialArticalEditor',
  components: { Editor },
  props: {
    height: {
      type: Number,
      default: 400
    },
    value: {
      type: String,
      default: ''
    }
  },
  data: function () {
    return {
      init: null,
      plugins: null,
      vvv: this.value
    }
  },
  watch: {
    value: function(newVal, oldVal) {
      this.vvv = newVal
    }
  },
  mounted: function () {
    const _that = this
    this.init = {
      setup: function() {
        // eslint-disable-next-line
        import('@/components/Form/TinyMCE5/plugins/lineheight.js')
        // eslint-disable-next-line
        import('@/components/Form/TinyMCE5/plugins/indent2em.js')
      },
      height: this.height,
      menubar: false,
      // plugins: 'formatpainter pagebreak charmap emoticons pageembed a11ychecker quickbars visualblocks indent2em hr lineheight permanentpen print preview searchreplace toc wordcount advlist image code fullscreen imagetools link table advcode media powerpaste lists checklist help',
      // toolbar: 'undo redo | formatselect fontselect fontsizeselect | bold italic underline strikethrough permanentpen forecolor backcolor formatpainter removeformat | alignleft aligncenter alignright alignjustify indent2em outdent indent lineheight hr | cut copy | pagebreak | charmap emoticons | table link image media pageembed | bullist numlist checklist |  blockquote subscript print preview searchreplace toc fullscreen visualblocks code a11ycheck help',
      plugins: 'pagebreak charmap emoticons quickbars visualblocks indent2em hr lineheight print preview searchreplace toc wordcount advlist image code fullscreen imagetools link table media lists help',
      toolbar: 'undo redo | formatselect fontselect fontsizeselect | bold italic underline strikethrough forecolor backcolor removeformat | alignleft aligncenter alignright alignjustify indent2em outdent indent lineheight hr | cut copy | pagebreak | charmap emoticons | table link image media | bullist numlist |  blockquote subscript print preview searchreplace toc fullscreen visualblocks code a11ycheck help',
      quickbars_insert_toolbar: 'quickimage',
      fontsize_formats: '8px 11px 12px 13px 14px 15px 16px 17px 18px 19px 20px 22px 24px 36px 48px',
      font_formats: '微软雅黑=微软雅黑;宋体=宋体;黑体=黑体;仿宋=仿宋;楷体=楷体;隶书=隶书;幼圆=幼圆;Andale Mono=andale mono,times; Arial=arial,helvetica,sans-serif; Arial Black=arial black,avant garde; Book Antiqua=book antiqua,palatino; Comic Sans MS=comic sans ms,sans-serif; Courier New=courier new,courier; Georgia=georgia,palatino; Helvetica=helvetica; Impact=impact,chicago; Symbol=symbol; Tahoma=tahoma,arial,helvetica,sans-serif; Terminal=terminal,monaco; Times New Roman=times new roman,times; Trebuchet MS=trebuchet ms,geneva; Verdana=verdana,geneva; Webdings=webdings; Wingdings=wingdings,zapf dingbats',
      language: 'zh_CN',
      language_url: '/static/tinymce5/zh_CN.js', // https://www.tiny.cloud/docs/configure/localization/#language_url
      // images_upload_url: SingleImageUploadApi,
      // images_upload_credentials: true
      images_upload_handler: function (blobInfo, success, failure) {
        var xhr, formData
        xhr = new XMLHttpRequest()
        xhr.withCredentials = false
        xhr.open('POST', SingleImageUploadApi)
        xhr.setRequestHeader('Authorization', 'Bearer ' + _that.$store.getters.token) // 添加系统认证token的header
        xhr.onload = function() {
          var json
          if (xhr.status !== 200) {
            failure('HTTP Error: ' + xhr.status)
            return
          }
          json = JSON.parse(xhr.responseText)
          if (!json || typeof json.url !== 'string') {
            failure('Invalid JSON: ' + xhr.responseText)
            return
          }
          success(json.url)
        }
        formData = new FormData()
        formData.append('file', blobInfo.blob(), blobInfo.filename())
        formData.append('water', 'false') // 添加水印设置参数
        xhr.send(formData)
      }
    }
  },
  methods: {
    onChangeEvent: function(e) {
      this.$emit('input', e.target.contentDocument.body.innerHTML)
    }
  }
}
</script>
<style scoped>
</style>
